<template>
  <div class="member">
    <!--标题-->
    <div class="member1">
      <img @click="returns()" src="../../../assets/2.svg" />
      <h3>会员服务</h3>
      <div></div>
    </div>
    <!--内容-->
    <div class="member2">
      <h4>红娘会员</h4>
      <div class="member2-div">
        <div class="member2-li">
          <span>1个月会员</span>
          <span class="member2-span">￥300:00</span>
          <button>购买</button>
        </div>
        <div class="member2-li">
          <span>3个月会员</span>
          <span>￥300:00</span>
          <button>购买</button>
        </div>
        <div class="member2-li">
          <span>6个月会员</span>
          <span>￥300:00</span>
          <button>购买</button>
        </div>
        <div class="member2-li">
          <span>1年会员</span>
          <span>￥300:00</span>
          <button>购买</button>
        </div>
      </div>
      <div class="member2-div1">
        <h4>会员特权</h4>
        <img src="../../../assets/3.jpg" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "member2",
  methods: {
    returns(){
      this.$router.back()
    }
  }
}
</script>
<style scoped>
/*标题*/
.member {
  text-align: center;
}
.member1 {
  height: 55px;
  line-height: 55px;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ccc;
}
.member1 img {
  width: 20px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}
.member1 h3 {
  font-weight: normal;
  flex: 6
}
.member1 div {
  flex: 1;
}
/*内容*/
.member2 h4 {
  font-weight: normal;
  text-align: left;
  margin: 10px 0 10px 20px;
}
.member2-div {
  height: 240px;
  background-color: #d3d3d3;
}
.member2-li {
  text-align: left;
  display: flex;
  padding-left: 20px;
  height: 60px;
  line-height: 60px;
  font-size: 1.1rem;
  border-bottom: 1px solid #ffffff;
}
.member2-li span {
  flex: 0.3;
  margin-right: 20px;
}
.member2-li button {
  flex: 0.3;
  width: 80px;
  height: 30px;
  font-size: 1.1rem;
  border-radius: 10px;
  margin-top: 16px;
}
.member2-span {
  flex: 1;
  text-align: left;
}
.member2-div1 img {
  width: 90%;
  height: 240px;
  object-fit: cover;
}
</style>
